import React from 'react';
import './index.less'

export default function OrderBy(props){
    const li1 = React.useRef()
    const li2 = React.useRef()
    const li3 = React.useRef()
    return(
        <div className='OrderBy'>
            <ul onClick={handleClick}>
                <li className='active' ref={li1}><span data-order='1'>综合排序</span></li>
                <li ref={li2}><span data-order='2'>价格从高到低</span></li>
                <li ref={li3}><span data-order='3'>价格从低到高</span></li>
            </ul>
        </div>
    )
    function clearClass(){
        li1.current.className = ''
        li2.current.className = ''
        li3.current.className = ''
    }
    function handleClick(e){
        if(e.target.tagName === 'SPAN'){
            //获取选中的排列flag
            let flag = e.target.getAttribute("data-order")
            //将排列方式发送回父组件中
            props.getOrder(flag)
            //设置选中样式
            clearClass()
            e.target.parentElement.className = 'active'
        }
    }
}

